<template>
  <div class="yt-file">
    <div
      v-if="_disabled && fileList.length === 0"
      class="yt-file-noInfo">
      <img
        style="width: 36%"
        :src="require('./noInfo.png')">
      <p class="yt-file-noInfo-text">{{ noInfoText }}</p>
    </div>
    <div
      class="yt-file-item"
      v-for="(file, index) in fileList"
      :key="index">
      <img
        class="yt-file-img"
        v-if="isImg(file)"
        @click="handlerTap(file)"
        :src="file.url">
      <div
        class="yt-file-btn"
        v-if="!isImg(file)"
        @click="handlerTap(file)">
        <p class="yt-file-text">{{file.name}}</p>
      </div>
      <span
        class="yt-file-remove"
        @click.stop="handlerRemove(index)"
        v-if="!_disabled"><i class="yt-icon yt-icon-close"></i></span>
    </div>
    <div
      class="yt-file-upload"
      v-if="!_disabled">
      <input
        class="yt-file-input"
        type="file"
        @change="handlerChange"
        v-if="fileList.length < max"
        ref="input">
      <div
        class="yt-file-btn"
        @click="handlerToast">
        <i class="yt-file-camera yt-icon yt-icon-camera"></i>
        <p class="yt-file-text">{{btnText}}</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { isImg, isVideo, bridge } from '../utils'
  import { Toast } from '../$toast'
  import { PreviewImg } from '../$previewImg'

  export default {
    name: 'yt-file',
    inject: {
      ytForm: {
        default: () => ({})
      }
    },
    props: {
      /**
       * 设置最大值
       */
      max: {
        type: Number,
        default: 5
      },
      /**
       * 文件列表 例如 [{name, url}]
       */
      value: Array,
      /**
       *  是否禁用新增
       */
      disabled: {
        type: Boolean,
        default: false
      },
      /**
       *  上传文件的函数   函数接受一个参数 为file对象 目前只能上传单个文件
       */
      uploadFile: {
        type: Function,
        required: true
      },
      noInfoText: {
        type: String,
        default: "暂无照片!"
      }
    },
    computed: {
      btnText() {
        if (!this.fileList || this.fileList.length === 0) return '拍摄/文件'
        return `${ this.fileList.length } / ${ this.max }`
      },
      _disabled() {
        return this.disabled || (this.ytForm || {}).disabled
      },
      fileList: {
        get() {
          return this.value || []
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    },
    methods: {
      handlerTap(file) {
        if (!file.url) {
          Toast('文件不存在', 'tool')
        } else if (isImg(file.name)) {
          let imgList = this.fileList.reduce((results, item) => {
            if (isImg(item.name)) {
              results.push(item.url)
            }
            return results
          }, [])
          let current = imgList.indexOf(file.url)
          PreviewImg({ current: current, list: imgList })
        } else if (isVideo(file.name)) {
          bridge.Play(file.url)
        } else {
          bridge.PreviewFile({ title: file.name, url: file.url })
        }
      },
      handlerToast() {
        if (this.fileList.length >= this.max) {
          Toast(`最多添加${ this.max }个!`, 'error')
        }
      },
      handlerRemove(index) {
        if (this._disabled) return
        this.fileList.splice(index, 1)
      },
      async handlerChange(e) {
        let files = e.target.files
        if (files && files.length && this.uploadFile) {
          try {
            let { name, _name, url, _url } = await this.uploadFile(files[0])
            let file = {
              name: _name || name,
              url: _url || url
            }
            this.fileList = [].concat(this.fileList, [file])
          } catch (e) {
            Toast('上传文件失败！', 'error')
          }
        }
        e.target.value = null
      },
      isImg(file) {
        return isImg(file.name)
      },
      isVideo(file) {
        return isVideo(file.name)
      }
    }
  }
</script>
